<template>
    <div class="sysUser">
        <h2>账号管理</h2>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="userList">
                    <el-row>
                        <el-col :span="24">
                            <div>
                                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item label="用户名称">
                                        <el-input v-model="formInline.userName" placeholder="请输入用户名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="手机号码">
                                        <el-input v-model="formInline.phonenumber" placeholder="请输入手机号码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-select v-model="formInline.status" placeholder="岗位状态">
                                            <el-option label="正常" value="0"></el-option>
                                            <el-option label="停用" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-search" @click="searchUserList">搜索</el-button>
                                        <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                        <el-button type="text" @click="addUser">新增账号</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div style="margin-top:20px;">
                                <el-table :data="tableData" border height="350">
                                    <el-table-column type="selection" width="55"> 
                                    </el-table-column>
                                    <el-table-column prop="nickName" label="账号名称" width="140" align="center">
                                    </el-table-column>
                                    <el-table-column prop="phonenumber" label="手机号码" width="120" align="center">
                                    </el-table-column>
                                    <el-table-column prop="shDepartment.deptName" label="归属部门" align="center">
                                    </el-table-column>
                                    <el-table-column prop="createTime" label="创建时间" align="center">
                                    </el-table-column>
                                    <el-table-column prop="sysRole.roleName" label="所属角色" align="center">
                                    </el-table-column>
                                    <el-table-column prop="status" label="状态" align="center">
                                        <template slot-scope="scope">
                                            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleTuningMode1(scope.row)"></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center"
                                        label="操作"
                                        width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="toUpdateUser(scope.row)" type="text" size="small">编辑</el-button>
                                            <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="新增账号" :visible.sync="dialogFormVisible">
            <el-form :model="addSysUser">
                <el-form-item label="账号名称" :label-width="formLabelWidth">
                    <el-input v-model="addSysUser.userName" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="addSysUser.phonenumber" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="addSysUser.password" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="归属部门" :label-width="formLabelWidth">
                    <el-select v-model="addSysUser.deptId" placeholder="请选择部门">
                        <el-option
                            v-for="item in deptOptions"
                            :key="item.id"
                            :label="item.deptName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属角色" :label-width="formLabelWidth">
                    <el-select v-model="addSysUser.roleId" placeholder="请选择角色">
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toAddSysUser">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改账号" :visible.sync="updialogFormVisible">
            <el-form :model="upSysUser">
                <el-form-item label="账号名称" :label-width="formLabelWidth">
                    <el-input v-model="upSysUser.userName" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="upSysUser.phonenumber" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="upSysUser.password" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="归属部门" :label-width="formLabelWidth">
                    <el-select v-model="upSysUser.deptId" placeholder="请选择部门">
                        <el-option
                            v-for="item in deptOptions"
                            :key="item.id"
                            :label="item.deptName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属角色" :label-width="formLabelWidth">
                    <el-select v-model="upSysUser.roleId" placeholder="请选择角色">
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toUpSysUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>    
</template>
<script>

import axios from 'axios'

export default {
    name:"SysUser",
    data(){
        return{
            data: [],
            formInline: {
                userName: '',
                phonenumber: '',
                status: ''
            },
            tableData:[],
            pageNum : 1,
            pageSize: 10,
            total: 0,
            deptOptions:[],
            roleOptions:[],
            dialogFormVisible: false,
            updialogFormVisible: false,
            formLabelWidth: '80px',
            addSysUser:{
                userName:'',
                phonenumber:'',
                password:'',
                deptId:'',
                roleId:''
            },
            upSysUser:{
                userName:'',
                phonenumber:'',
                password:'',
                deptId:'',
                roleId:''
            }
        }
    },
    created(){
        this.searchUserList();
    },
    methods:{
        // 查询
        searchUserList(){
            axios.post("/api/manager/sysUser/findAll?pageNum="+this.pageNum + "&pageSize=" + this.pageSize, this.formInline)
                .then((res) =>{
                    console.log(res)
                    this.tableData=res.data.data.items;
                    this.total = res.data.data.totalElements;
                })
        },
        // 分页
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.searchUserList();
      },
      handleCurrentChange(val) {
        console.log(val);
        this.pageNum = val;
        this.searchUserList();
      },
    //   新增
      addUser(){
        this.dialogFormVisible = true;
        this.findRoleList();
        this.findDeptList();
      },
      toAddSysUser(){
        console.log(this.addSysUser)
        axios.post("/api/manager/sysUser/addUser",this.addSysUser)
            .then((res) =>{
                console.log(res)
                if(res.data.code == 200){
                    this.$message({
                        message: '恭喜你，' + res.data.message,
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                    this.searchUserList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })
      },
      findRoleList(){
        axios.get("/api/manager/sysRole/findSysRoleList")
            .then((res) =>{
                this.roleOptions = res.data.data;
            })
      },
      findDeptList(){
        axios.get("/api/manager/dept/getShDepartmentList")
            .then((rea) =>{
                this.deptOptions = rea.data.data;
            })
      },
    //   修改
      toUpdateUser(row){
        this.updialogFormVisible = true;
        this.findRoleList();
        this.findDeptList();
        axios.post("/api/manager/sysUser/findUserById?userId=" +row.userId)
            .then((res)=>{
            console.log(res)
                this.upSysUser = res.data.data
            })

      },
      toUpSysUser(){
        axios.post("/api/manager/sysUser/updateUser",this.upSysUser)
            .then((res)=>{
                if(res.data.code == 200){
                    this.$message({
                        message: '恭喜你，' + res.data.message,
                        type: 'success'
                    });
                    this.updialogFormVisible = false;
                    this.searchUserList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })
      },
    //   删除
      deleteUser(row){
        axios.get("/api/manager/sysUser/deiUser?userId="+row.userId)
            .then((res)=>{
                if(res.data.code == 200){
                    this.$message({
                        message: '恭喜你，' + res.data.message,
                        type: 'success'
                    });
                    this.searchUserList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })

      },
      handleTuningMode1(row){
        axios.post("/api/manager/sysUser/updateStatus",row)
            .then((res)=>{
                if (res.data.code == 200) {
                    this.$message({
                    message: '恭喜你，' + res.data.message,
                    type: 'success'
                    });
                    this.searchUserList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })
      },
    //   重置
      onReset(){
        this.formInline.userName = '';
        this.formInline.phonenumber = '';
        this.formInline.status = '';
      }
    }
}
</script>
<style scoped>

</style>